<script lang="ts" setup>
import type { Recordable } from '@vben/types';

import { ref, unref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useFs } from '@fast-crud/fast-crud';

import { ExtendNoticeApi } from '#/api/basic/msg/extendNotice';
import { ActionEnum } from '#/enums/commonEnum';
import { $t } from '#/locales';

import { createCrudOptions } from './data/crud';

const { crudBinding } = useFs({ createCrudOptions });

const type = ref<
  ActionEnum.ADD | ActionEnum.COPY | ActionEnum.EDIT | ActionEnum.VIEW
>(ActionEnum.ADD);
const typeFormRef = ref<
  ActionEnum.ADD | ActionEnum.COPY | ActionEnum.EDIT | ActionEnum.VIEW
>(ActionEnum.ADD);
const formRef = ref();

const load = async (data: Recordable) => {
  type.value = data?.type;
  typeFormRef.value = data?.type;

  if ([ActionEnum.COPY].includes(unref(type))) {
    typeFormRef.value = ActionEnum.ADD;
  }

  if (![ActionEnum.ADD].includes(unref(type))) {
    const record = await ExtendNoticeApi.get(data?.id);
    record.id = undefined;
    formRef.value.setFormData(record, { mergeForm: false });
  }
};

const [Modal, modalApi] = useVbenModal({
  footer: false,
  async onOpened() {
    load({
      type: ActionEnum.VIEW,
      id: modalApi.getData()?.id,
    });
  },
  onConfirm() {},
});

defineExpose(modalApi);
</script>
<template>
  <Modal :title="$t(`common.title.view`)" class="h-[80%] w-[80%]">
    <div class="p-5">
      <FsForm ref="formRef" v-bind="crudBinding[`${typeFormRef}Form`]" />
    </div>
  </Modal>
</template>
